
<template>
  <div class="singerRoot" ref="singerRef">
    <div class="singer">
      <div class="selItem">
        <div class="title">语种：</div>
        <second-nav-bar :navBarData='languageSort' @itemNavClick='areaClick' />
      </div>
      <div class="selItem">
        <div class="title">分类：</div>
        <second-nav-bar :navBarData='typeSort' @itemNavClick='typeClick' />
      </div>
      <div class="selItem">
        <div class="title">筛选：</div>
        <second-nav-bar :navBarData='initialSort' @itemNavClick='initClick' />
      </div>
      <list-card :listCardData='singerList' class="singerCard" @itemCardClick='cardClick' />
      <go-top scrollObj='.singerRoot' />
    </div>

  </div>
</template>

<script>
import { reqSingerList } from '@/network/api'
import GoTop from '@/components/goTop/GoTop.vue'
import ListCard from '@/components/listCard/ListCard.vue'
import SecondNavBar from '@/components/secondNavBar/secondNavBar.vue'
import { reactive, onMounted, nextTick, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  components: { SecondNavBar, ListCard, GoTop },
  props: {},
  setup() {
    const data = reactive({
      languageSort: [
        { area: -1, name: '全部' },
        { area: 7, name: '华语' },
        { area: 96, name: '欧美' },
        { area: 8, name: '日本' },
        { area: 16, name: '韩国' },
        { area: 0, name: '其它' }
      ],
      typeSort: [
        { type: -1, name: '全部' },
        { type: 1, name: '男歌手' },
        { type: 2, name: '女歌手' },
        { type: 3, name: '乐队' }
      ],
      initialSort: [
        { initial: -1, name: '热门' },
        { initial: 'a', name: 'A' },
        { initial: 'b', name: 'B' },
        { initial: 'c', name: 'C' },
        { initial: 'd', name: 'D' },
        { initial: 'e', name: 'E' },
        { initial: 'f', name: 'F' },
        { initial: 'g', name: 'G' },
        { initial: 'h', name: 'H' },
        { initial: 'i', name: 'I' },
        { initial: 'j', name: 'J' },
        { initial: 'k', name: 'K' },
        { initial: 'l', name: 'L' },
        { initial: 'm', name: 'M' },
        { initial: 'n', name: 'N' },
        { initial: 'o', name: 'O' },
        { initial: 'p', name: 'P' },
        { initial: 'q', name: 'Q' },
        { initial: 'r', name: 'R' },
        { initial: 's', name: 'S' },
        { initial: 't', name: 'T' },
        { initial: 'u', name: 'U' },
        { initial: 'v', name: 'V' },
        { initial: 'w', name: 'W' },
        { initial: 'x', name: 'X' },
        { initial: 'y', name: 'Y' },
        { initial: 'z', name: 'Z' },
        { initial: 0, name: '#' }
      ],
      area: -1,
      type: -1,
      initial: -1,
      // 当前所在页数
      curPage: 1,
      singerList: [],
      // 是否还有更多数据
      isMore: false
    })
    const singerRef = ref(null)
    const router = useRouter()
    const initClick = v => {
      data.singerList = []
      data.curPage = 1
      data.initial = v.initial
      getSingerList()
    }

    const typeClick = v => {
      data.singerList = []
      data.curPage = 1
      data.type = v.type
      getSingerList()
    }

    const areaClick = v => {
      data.singerList = []
      data.curPage = 1
      data.area = v.area
      getSingerList()
    }
    const cardClick = id => {
      router.push('/singerdetail/' + id)
    }
    const bottom = () => {
      data.curPage += 1
      getSingerList()
    }
    const getSingerList = async () => {
      const res = await reqSingerList({
        type: data.type,
        area: data.area,
        initial: data.initial,
        offset: (data.curPage - 1) * 30
      })
      data.singerList = data.singerList.concat(res.artists)
      data.isMore = res.more
    }

    onMounted(() => {
      getSingerList()
      nextTick(() => {
        let height = singerRef.value.clientHeight - 60

        singerRef.value.onscroll = () => {
          if (data.isMore && singerRef.value.scrollTop > height) {
            data.isMore = false
            bottom()
            height = singerRef.value.querySelector('.singerCard').clientHeight
          }
        }
      })
    })
    return {
      ...toRefs(data),
      singerRef,
      cardClick,
      initClick,
      typeClick,
      areaClick
    }
  }
}
</script>

<style scoped>
.singerRoot {
  display: flex;
  justify-content: center;
  height: 100%;
  overflow-y: scroll;
}
.singer {
  max-width: 1000px;
  width: 100%;
  height: 100%;
}
.selItem {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.title {
  margin-right: 10px;
}
</style>